<template>
	<view class="container bg-white w-100 h-100">
		
		<view style="padding-bottom: 220rpx;">
			
			<view class="balance-info d-flex justify-content-between">
				<view class="flex-fill d-flex flex-column align-items-between justify-content-between">
					<view class="font-size-sm text-color-base">账户余额（元）</view>
					<view class="font-size-extra-lg text-color-base font-weight-bold">{{  isLogin ? member.balance : '***' }}</view>
					<view class="font-size-sm text-color-primary" @click="flow">交易记录</view>
				</view>
				<image src="/static/images/balance.png"  mode="widthFix"></image>
			</view>
			
			<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">储值金额</view>
			
			<view class="d-flex flex-wrap justify-content-between amounts">
				<view class="d-flex align-items-center just-content-center amount" 
					 :class="{'bg-primary text-color-white': item.selected, 'bg-base text-color-base': !item.selected}"
					  v-for="(item, index) in amounts" :key="index" @tap="handleSelected(index)">
					<view class="font-size-extra-lg font-weight-bold">{{ (item.name) }}</view>
					<!-- <view class="font-size-sm font-weight-light">元</view> -->
				</view>
			</view>
			
			<template v-if="rechargeCard">
				<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">使用说明</view>
				<view class="pre-line font-size-sm text-color-assist">
					{{ rechargeCard.desc }}
				</view>
			</template>
			
			<!-- bottom box begin -->
			<view class="bottom-box position-fixed fixed-bottom w-100 d-flex flex-column bg-white">
				<view class="protocol font-size-sm d-flex justify-content-start align-items-center">
					<view class="iconfont line-height-100"  @tap="agree = !agree"
						:class="{'iconradio-button-on text-color-primary': agree, 'iconradio-button-off text-color-base': !agree}"></view>
					<view class="text-color-base">我已阅读并同意</view>
					<view class="text-color-primary">《储值协议》</view>
				</view>
				<button type="primary" class="b" v-if="!agree" disabled="">购买</button>
				<button type="primary" class="b" v-else @click="pay()">购买</button>
			</view>
			<!-- bottom box end -->
			
		</view>
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {mapState, mapGetters} from 'vuex'
	export default {
		data() {
			return {
				agree: false,
				amounts: [],
				id:''
			}
		},
		async onLoad() {
			//请求充值
			this.$http.get('/recharge/recharge', '').then(res => {
				// console.log(res)
				this.amounts = res.data.data
			
			}).catch(err => {
			
			})
			// this.amounts = await this.$api('rechargeCards')
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin']),
			rechargeCard() {
				return this.amounts.find(item => item.selected) || ''
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			handleSelected(index) {
				this.amounts.forEach(item => this.$set(item, 'selected', false))
				this.$set(this.amounts[index], 'selected', true)
				// console.log(this.amounts[index])
				this.id = this.amounts[index].id
			},
			pay(){
				let id = this.id
				if(!this.isLogin) {
					this.login()
					return
				}
				this.$http.post('/recharge/payOrder', {id:id}).then(res => { //接口请求
					let result = res.data.data //接口返回数据
						// console.log(result)
					// console.log(reson.provider[0])
					uni.showLoading({}) //拉起支付加载提示
					if (res.statusCode == 200) {
						uni.hideLoading()
						uni.requestPayment({
							provider: result.provider,
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.package,
							signType:  result.signType,
							paySign:  result.paySign,
							success: () => {
								this.$http.post('/user', '').then(res => {
									console.log(res,res.data.code)
									if(res.data.code != 401){
										// console.log('支付成功')
										this.SET_MEMBER(res.data.data)
										// console.log('返回上一级')
										uni.navigateBack({})
									}
								}).catch(err => {
								
								})
							},
							fail: function (err) {
								// uni.switchTab({
								// 	url:'/pages/mine/mine'
								// })
								// console.log('fail:' + JSON.stringify(err));
							},complete(res) {
								// console.log('complete:' + JSON.stringify(res));
							}
						});
					}
				})
				console.log(id,'pay')
			},
			flow(){
				uni.navigateTo({
					url:"/pages/balance/flow"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 0 40rpx;
}

.balance-info {
	padding: 50rpx 10rpx;
	
	view {
		height: calc(366 / 638 * 340);
		padding: 10rpx 0;
	}
	image {
		width: 340rpx;
	}
}

.amounts {
	margin-bottom: 40rpx;
	
	.amount {
		width: calc(96% / 3);
		padding: 50rpx 0;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}
}

.bottom-box {
	padding: 0 40rpx;
	box-shadow: 0 0 20rpx rgba(6, 6, 6, 0.1);
	
	.protocol {
		padding: 36rpx 0;
		height: 100rpx;
		view {
			margin-right: 10rpx;
		}
	}
	
	button {
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rem !important;
		margin-bottom: 30rpx;
	}
}
</style>
